// import React, {useRef, useState} from 'react'
import React, {useState,} from 'react'
import {connect} from 'react-redux'

// 页面重定向
import {Redirect, withRouter, Link} from "react-router-dom"

// sharedComponents
import CustomButton from "../../shared-components/CustomButton/CustomBotton"
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout"
import FormTitle from "../../shared-components/FormTitle/FormTitle"
import FormInput from "../../shared-components/FormInput/FormInput"
import FormPwdInput from "../../shared-components/FormPwdInput/FormPwdInput"

// ANTD-MOBILE
import {WhiteSpace, WingBlank} from "antd-mobile"
// constants
import constants from "../../utils/constants"
import './login.css'


const LoginContainer = (props) => {

    // states
    const [un, setUn] = useState('')
    const [pwd, setPwd] = useState('')
    // const [YQM, setYQM] = useState('')
    const {
        isLogin,
        location: {from,},
        emitError,
        history,
    } = props

    if (isLogin) {
        if (from) {
            return <Redirect to={from}/>
        }
        return <Redirect to="/"/>
    }

    // 在提交前检查表单
    const checkBeforeSubmit = ({un, pwd, code,}) => {
        // 检查 用户名 和 密码
        if (un.length <= 0 || pwd.length <= 0) {
            emitError('用户名和密码不能为空')
            return false
        }
        return true
    }

    const onChange = (e, type) => {
        const o = {
            un: setUn,
            pwd: setPwd,
        }
        o[type](e.target.value)
    }

    const onSubmit = (e, loginmode) => {
        e.preventDefault()
        const code = '1'
        const formData = {un, pwd, code, loginmode}
        if (checkBeforeSubmit(formData)) {
            props.doLoginGo(formData)
        }
    }

    const forgetPassword = (
        <WingBlank>
            <Link to='./forget-password'>
                <p className='login-forget-pwd' style={{marginTop: '1rem', marginBottom: '1rem',}}>忘记密码</p>
            </Link>
        </WingBlank>
    )

    const form = (
        <WingBlank>
            <FormInput
                type='text'
                value={un}
                onChange={e => onChange(e, 'un')}
                placeholder='手机号码/邮箱地址'
            />
            <WhiteSpace/>
            <FormPwdInput
                value={pwd}
                onChange={(e) => onChange(e, 'pwd')}
                placeholder='输入密码'
            />
            {forgetPassword}
        </WingBlank>
    )

    const buttons = (
        <WingBlank>
            <div style={{marginTop: '2rem',}}>
                <CustomButton
                    onClick={(e) => onSubmit(e, 1)}
                    shadow='0px 6px 10px 0px rgba(33, 58, 75,0.4)'
                >登录</CustomButton>
                <WhiteSpace size='lg'/>
                <Link to="/reg">
                    <CustomButton
                        bg='#fff'
                        color='#333'
                    >注册</CustomButton>
                </Link>
            </div>

        </WingBlank>
    )

    return (
        <div className='fixed-flex-form-container'>
            <GoBackLayout
                history={history}
                GoBackIconColor={`${constants.themeColor}`}
            >

                <FormTitle
                    title='登录'
                />
                {form}
                {buttons}
                {/*<LoginFooter/>*/}
            </GoBackLayout>
        </div>
    )
}

const mapState = state => ({
    isLogin: state.global.isLogin,
    user: state.global.user,
})

// 解构出state.global里的doLogin  
const mapDispatch = ({global: {doLoginGo, globalError,}}) => ({
    doLoginGo: (formdata) => doLoginGo(formdata),
    emitError: (error) => globalError(error),
})

export default connect(mapState, mapDispatch)(withRouter(LoginContainer))
